<template>
  <absolute-container class="p-[20px]">
    <page-main
      class="flex h-full flex-col rounded-[4px] bg-[#fff] px-[16px] pb-0 pt-[16px]"
      style="box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08)"
    >
      <QueryForm ref="refQueryForm" :getDataList="getDataList" @addDetailDrawer="addDetailDrawer"></QueryForm>
      <div class="el-form-item">
        <t-button svgIcon="ic-btn-add" @click="addDetailDrawer">新增</t-button>
      </div>
      <el-table height="100%" :data="dataList">
        <el-table-column type="index" label="序号" width="60" :index="columnIndex" />
        <el-table-column :prop="PROPS.roleName" :label="LABELS.roleName" min-width="268" show-overflow-tooltip />
        <el-table-column :prop="PROPS.roleCode" :label="LABELS.roleCode" min-width="268" show-overflow-tooltip />
        <el-table-column
          :prop="PROPS.roleType"
          :label="LABELS.roleType"
          :formatter="(row, column, cellValue) => $store.state.data.KV_MAP[OPTION_KEYS.roleType][cellValue]"
          min-width="180"
        />
        <el-table-column
          :prop="PROPS.createdAt"
          :label="LABELS.createdAt"
          :formatter="_formatterDatetime"
          min-width="180"
        />
        <el-table-column :prop="PROPS.status" :label="LABELS.status" min-width="180">
          <template #default="{ row }">
            <div v-if="$store.state.data.KV_MAP[OPTION_KEYS.status][row.status]" class="flex items-center">
              <div
                class="mr-[8px] h-[6px] w-[6px] flex-shrink-0"
                style="border-radius: 50%"
                :class="[
                  $store.state.data.KV_MAP[OPTION_KEYS.status][row.status] == '启用' ? 'bg-[#1D7FF2]' : 'bg-[#ed7b2f]',
                ]"
              ></div>
              {{ $store.state.data.KV_MAP[OPTION_KEYS.status][row.status] }}
            </div>
          </template>
        </el-table-column>
        <el-table-column :prop="PROPS.comments" :label="LABELS.comments" width="180" show-overflow-tooltip />
        <el-table-column class-name="!px-[0px]" label="操作" align="left" fixed="right" width="140">
          <template #default="{ row }">
            <div
              v-if="$store.state.data.KV_MAP[OPTION_KEYS.roleType][row[PROPS.roleType]] == '自定义'"
              class="space-x-[12px]"
            >
              <span class="cursor-pointer text-[#1D7FF2]" @click="onEdit(row)">编辑</span>
              <span class="color-danger cursor-pointer" @click="onDel(row)">删除</span>
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link text-[#1D7FF2]"> 更多 </span>
                <el-dropdown-menu slot="dropdown" class="table-operates-dropdown">
                  <el-dropdown-item :command="{ type: 'role', row }">授权</el-dropdown-item>
                  <el-dropdown-item :command="{ type: 'user', row }">用户</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <div v-else>
              <span class="cursor-pointer text-[#1D7FF2]" @click="onAssociatedUsers(row)">用户</span>
            </div>
          </template>
        </el-table-column>
        <template slot="empty">
          <t-empty-data />
        </template>
      </el-table>
      <div class="addShadow relative -left-[16px] -top-[1px] z-50 w-[calc(100%+32px)]">
        <el-pagination
          :current-page="pagination.page"
          :total="pagination.total"
          :page-size="pagination.size"
          :page-sizes="pagination.sizes"
          :layout="pagination.layout"
          :hide-on-single-page="false"
          background
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
      </div>
    </page-main>

    <DetailDrawer :id="id" v-model="drawerVisible" :code="code" @onSubmit="onSubmit" />
    <DetailDrawerRole :id="id" v-model="PermissionVisible" :code="code" @closeDrawer="doCloseDrawer" />
    <DetailDrawers :id="id" v-model="userRelaxVisible" :code="code" />
  </absolute-container>
</template>

<script>
import config from "./config";
import QueryForm from "./components/QueryForm.vue";
import DetailDrawer from "./components/DetailDrawer.vue";
import DetailDrawerRole from "./components/DetailDrawerRole.vue";
import DetailDrawers from "./components/DetailDrawers.vue";
import { systemRoleAdd, systemRoleDelete, systemRoleList, systemRoleUpdate } from "@/api/role";
import tableMixin from "@/mixin/table";
import paginationMixin from "@/mixin/pagination";

export default {
  name: "RoleMgmt",
  components: { DetailDrawer, QueryForm, DetailDrawerRole, DetailDrawers },
  mixins: [paginationMixin, tableMixin],
  data() {
    return {
      ...config,
      id: "",
      code: "",
      dataList: [],
      drawerVisible: false,
      PermissionVisible: false,
      userRelaxVisible: false,
    };
  },
  computed: {},
  mounted() {
    this.getDataList();
  },
  methods: {
    handleCommand(command) {
      const { type, row } = command;
      if (type == "role") {
        this.onAuth(row);
      } else if (type == "user") {
        this.onAssociatedUsers(row);
      }
    },
    getDataList(param) {
      systemRoleList(this.getParams(param)).then((res) => {
        this.dataList = res.content;
        this.pagination.total = res.totalElements;
      });
    },
    doCloseDrawer() {
      this.$message.success({
        message: "操作成功",
      });
      this.getDataList(true);
      this.PermissionVisible = false;
    },
    onAssociatedUsers(row) {
      this.id = row.id;
      this.code = row.code;
      this.userRelaxVisible = true;
    },
    onAuth(row) {
      this.id = row.id;
      this.code = row.code;
      this.PermissionVisible = true;
    },
    onDetail(row) {
      this.id = row.id;
      this.drawerVisible = true;
    },
    async onDel(row) {
      try {
        await this.$confirm(`确定删除「${row["name"]}」吗？`, "确认信息", {
          type: "warning",
          cancelButtonClass: "common-confirm-cancel-btn",
          confirmButtonClass: "common-confirm-confirm-btn",
        });
        try {
          await systemRoleDelete({ id: row.id });
          this.onFinsh();
        } catch (e) {
          //no-op
        }
      } catch {
        this.$message.warning("已取消删除");
      }
    },
    addDetailDrawer() {
      this.id = 0; //false代表新增
      this.drawerVisible = true;
    },
    onEdit(row) {
      this.id = row.id;
      this.code = row.code;
      this.drawerVisible = true;
    },
    async onSubmit(value) {
      if (this.id) {
        //详情
        await systemRoleUpdate(value);
      } else {
        //新增
        await systemRoleAdd(value);
      }
      this.onFinsh(this.nodeId);
    },
    onFinsh(value) {
      //value有值代表需要重置分页参数
      this.$message.success({
        message: "操作成功",
      });
      this.getDataList(value);
      this.drawerVisible = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.addShadow {
  display: inline-flex;
  justify-content: flex-end;
  height: 68px;
  padding: 16px;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 -1px 4px 0 rgb(0 0 0 / 0.08);
}

.table-operates-dropdown {
  .el-dropdown-menu__item {
    height: 32px;
    padding: 0 8px !important;
    font-size: 14px;
    line-height: 32px !important;
  }
}
</style>
